<template>
  <!-- 对比排序 -->
  <div>
    <div class="top w100 df jc-sb">
      <somkeTop :title="top_title" :list="top_list"></somkeTop>
      <div> <lay-button @click="close" class="layui-btn" >关闭</lay-button></div>
    </div>
    <div class="content">
      <div class="btn">
        <lay-button size="sm" style="background-color: #b8d8f8;color: #000;" @click="open_y">选择烟支</lay-button>
      </div>

      <el-table :data="y_list_sele" style="width: 100%" stripe empty-text="暂无评价"
      :span-method="mergeMethod"
      height="50vh">


      <el-table-column prop="firstName" label="品牌" width="150" align="center"> 
        </el-table-column>

      <el-table-column prop="endName" label="编号" width="150" align="center">
          <template #default="{row}">
            <el-input v-model="row.endName" @blur="smokeBlur(row)"/>
          </template>
        </el-table-column>
        
        <el-table-column label="香气特性" align="center">
          <el-table-column prop="aromaQuality" label="香气质" align="center">
          </el-table-column>
          <el-table-column prop="aromaVolume" label="香气量" align="center">
          </el-table-column>
          <el-table-column prop="transdermal" label="透发性" align="center">
          </el-table-column>
          <el-table-column prop="impure" label="杂气" align="center" />
        </el-table-column>
        <el-table-column label="烟气特性" align="center">
          <el-table-column prop="density" label="浓度" align="center">
          </el-table-column>
          <el-table-column prop="energy" label="劲头" align="center">
          </el-table-column>
          <el-table-column prop="delicacyLevel" label="细腻程度" align="center" >
          </el-table-column>
          <el-table-column prop="clustering" label="成团性" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="口感特性" align="center">
          <el-table-column prop="thrill" label="刺激性" align="center">
          </el-table-column>
          <el-table-column prop="dryFeeling" label="干燥感" align="center">
          </el-table-column>
          <el-table-column prop="sweetness" label="甜度" align="center">
          </el-table-column>
          <el-table-column prop="aftertaste" label="余味" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{row, $index}">
            <el-button type="danger" text @click="del_y(row, $index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 烟支弹层 -->
      <lay-layer v-model="y_visible" :area="['800px', '620px']" :title="'选择烟支'" :btn="y_visible_opteron">
        <div style="padding: 20px 40px 20px 20px;">
          <lay-table ref="tableRef3" :columns="y_columns" :data-source="y_dataSource" :default-toolbar="false" v-model:selectedKeys="y_selectedKeys">
          </lay-table>
        </div>
      </lay-layer>

      <!-- <div class="footer-btn">
        <div></div>
        <div>
          <lay-button @click="close" class="layui-btn layui-bg-blue">关闭</lay-button>
        </div>
      </div> -->

    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from "vue";
import somkeTop from "@/components/somkeTop.vue";
import http from "@/http/index";
import { layer } from "@layui/layui-vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from 'element-plus'

const currentRout = useRoute();
const router = useRouter();

const id = currentRout.query.id;
onMounted(async () => {
  await get_y_list();
  await get_detail();
});

const data = reactive({
  top_title: "对比排序设置",
  top_list: [
    {
      name: "单位(部门)",
      content: "许昌卷烟厂",
      id: 1,
    },
    {
      name: "时间",
      content: new Date().toLocaleString(),
      id: 2,
    },
    {
      name: "编号",
      content: "Q/HNZY 101.3 001-15",
      id: 3,
    },
  ],
});

let { top_list, top_title } = toRefs(data);

const info = ref([]);
// 烟支弹层
const y_visible = ref(false);
// 烟支当前选中的key
const y_selectedKeys = ref<Array<string>>([]);
// 烟支列表数据
const y_dataSource = ref([]);
// 烟支header    key
const y_columns = ref([
  { fixed: "left", type: "checkbox", title: "复选" },
  { title: "牌号", key: "smokeModel" },
  // { title: "价格", key: "smokePerk" },
]);
// 当前选中的烟支列表
const y_list_sele = ref<Array<any>>([]);

// 烟支弹层操作
const y_visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      await enter();
    },
  },
  {
    text: "取消",
    callback: () => {
      y_visible.value = false;
    },
  },
]);

// 选择烟支
const open_y = () => {
  y_visible.value = true;
};

//确认
const enter = async () => {

  // if(y_selectedKeys.value.length < 2) {
  //   return ElMessage.warning("烟支选择至少为两支!")
  // }

  let method = "post";
  let url = '/meetingContrastSort'
  if (info.value && info.value.length > 0) {
    method = "put";
    url = '/meetingContrastSort/edit'
  }

  const res = await http.corsApi(url, method, {
    allId: id,
    allowanceIdList: y_selectedKeys.value,
  });
  //   console.log(res);
  if (res.data) {
    layer.confirm("设置完成", { icon: 1 });
    await get_detail();
    y_visible.value = false;
  }
};

/**修改烟支名称 */
async function smokeBlur(row:any) {

  console.log(row.smokeName1 + '-' + row.smokeName2);


 
 const res =  await http.corsApi("/meetingContrastSort/editMeetingContrastSort", 'put', {
    allId: row.allId,
    id: row.id,
    firstName:row.firstName,
    endName:row.endName,
    smokeName:row.smokeName,
    smokeId:row.smokeId
  });
  if(res.data){
    layer.msg('修改成功',{icon:1})
  }


  await get_detail()
  
}

// 删除当前行数据
async function del_y(row: any, index:number) {

  // ElMessageBox.confirm(
  //   '是否确认删除本品牌的烟支数据！',
  //   '提示',
  //   {
  //     confirmButtonText: '确认',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   }
  // )
  //   .then( async() => {
  //     let arr:Array<string> = [row.id, y_list_sele.value[index+1].id]
  //     const res = await http.corsApi(`/meetingContrastSort/batch`, "delete", arr);
  //     if (res.data) {
  //       layer.confirm("删除完成", { icon: 1 });
  //       await get_detail();
  //     }
  //   })
  //   .catch(() => {
  //     ElMessage({
  //       type: 'info',
  //       message: '取消删除',
  //     })
  //   })
  // const res = await http.corsApi(`/meetingContrastSort/batch`, "delete", [row.id]);
  // const res = await http.corsApi(`/meetingContrastSort/${row.id}`, "delete", []);

      let arr:Array<string> = [row.id, y_list_sele.value[index+1].id]
      const res = await http.corsApi(`/meetingContrastSort/del`, "delete", {
        allId: row.allId,
        allowanceIdList: arr
      });
      if (res.data) {
        layer.confirm("删除完成", { icon: 1 });
        await get_detail();
      }
}

// const del_y = async (item:any) => {
//   // /meetingContrast/batch
//   const res = await http.corsApi(`/meetingContrast/batch`, "delete", [item.id]);

//   if (res.data) {
//     layer.confirm("删除完成", { icon: 1 });
//     await get_detail();
//   }
// };

// 获取烟支列表
const get_y_list = async () => {
  const res = await http.corsApi("/smokeAllowance", "get", {});
  //   console.log("获取烟支列表",res);
  y_dataSource.value = res.data;
};

function close() {
  router.go(-1);
}
/**合并单元格 */
function mergeMethod({rowIndex, columnIndex}:any) {
  if(columnIndex === 14) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

let defDict = {
  aromaQuality: "-",
  aromaVolume: "-",
  transdermal: "-",
  impure: "-",
  density: "-",
  energy: "-",
  delicacyLevel: "-",
  clustering: "-",
  thrill: "-",
  dryFeeling: "-",
  sweetness: "-",
  aftertaste: "-",
};

// 获取页面详情
const get_detail = async () => {
  y_selectedKeys.value = [];
  y_list_sele.value = [];
  const res = await http.corsApi("/meetingContrastSort", "get", { allId: id });
  //   console.log("获取页面详情", res);
  info.value = res.data;

  res.data.map((item: any) => {
    y_selectedKeys.value.push(item.smokeId);
    y_dataSource.value.map((ele: any) => {
      if (item.smokeId == ele.id) { 
        // let name2 = item.smokeName?.split('-')[1]
        y_list_sele.value.push({ ...item, ...defDict  });
      }
    });
  });
  y_selectedKeys.value = Array.from(new Set(y_selectedKeys.value));
    console.log(y_list_sele.value);
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  background-color: #f5f5f5;
  padding: 30px 25px;
  box-sizing: border-box;
  .btn {
    margin-bottom: 15px;
  }
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  padding: 15px 40px;
  box-sizing: border-box;
}
</style>